<template>
    <div class="app-container">
        <HeadSearch
            v-show="showSearch"
            :searchData="searchData"
            labelWidth="100"
            :cascaderData01="[]"
            :cascaderData02="[]"
            @handleSearchChild="handleSearchChild(arguments)"
            >
        </HeadSearch>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="handleAdd"
                >
                新增
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                type="success"
                plain
                icon="el-icon-edit"
                size="mini"
                :disabled="single"
                @click="handleUpdate"
                >
                修改
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                type="danger"
                plain
                icon="el-icon-delete"
                size="mini"
                :disabled="multiple"
                @click="handleDelete"
                >
                删除
                </el-button>
            </el-col>
            
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table
            stripe
            v-loading="loading"
            :data="tableData"
            @selection-change="handleSelectionChange"
            >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="活动" align="center" prop="activityTitle" />
            <el-table-column label="相册" align="center">
                <template slot-scope="scope">
                    <el-image
                        :src="scope.row.imgList[0]"
                        class="story-image"
                        :preview-src-list="preFix + scope.row.imgList"
                        fit="cover"
                    >
                        <div slot="placeholder" class="image-slot">
                        加载中...
                        </div>
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column label="备注" align="center" prop="remark" />
            <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
                fixed="right"
                width="160px"
            >
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-view"
                        @click="handleView(scope.row)"
                    >
                        详情
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
            />
        <!-- 添加或修改对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                <el-form-item label="活动" prop="massId">
                    <el-select v-model="form.massId" placeholder="请选择">
                        <el-option
                        v-for="(item, index) in activitiesData"
                            :key="index"
                            :label="item.subject"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="活动图片" prop="album">
                    <ImageUpload v-model="form.album"/>
                </el-form-item> 
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="form.remark" type="textarea" placeholder="请输入备注"/>
                </el-form-item>               
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 添加或修改对话框 -->
         <el-drawer
            size="60%"
            title="精彩集锦"
            :visible.sync="drawrOpen"
            direction="rtl">
            <div class="album-list">
                <vue-masonry-wall :items="albumList" :options="masonryOptions">
                <template v-slot:default="{ item }">
                    <el-card :body-style="{ padding: '0px' }" class="album-card">
                    <el-image
                        :src="item.thumbnail"
                        class="album-thumbnail"
                        :preview-src-list="[item.thumbnail]"
                        fit="cover"
                    >
                        <div slot="placeholder" class="image-slot">
                        加载中...
                        </div>
                    </el-image>
                    <div class="album-info">
                        <div class="album-title">{{ item.title }}</div>
                        <div class="album-description">{{ item.description }}</div>
                    </div>
                    </el-card>
                </template>
                </vue-masonry-wall>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="open = false">关 闭</el-button>
            </div>
        </el-drawer>

    </div>
</template>

<script>
// 引入相关API

import { listActivity } from "@/api/activity"; 
import { listAlbum, getAlbum, addAlbum, updateAlbum, delAlbum } from "@/api/wedActivity"; 
import VueMasonryWall from 'vue-masonry-wall';
import { listData } from "@/api/system/dict/data"

export default {
    name: "highlight",//集体婚礼相册
    components: {
        VueMasonryWall
    },
    data() {
        return {
            // 搜索框配置
            searchData: [
                { type: "input", name: "活动:", key: "activityTitle", placeholder: "请输入活动" },
            ],
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 表格数据
            tableData: [],
            // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                reginTime: [{ required: true, message: "报名时间不能为空", trigger: "blur" }],
            },
            drawrOpen: false,
            albumList: [],
            masonryOptions: {
                width: 300, // 每个项目的宽度
                maxColumns: 4, // 最大列数
                gutter: 20, // 间距
                minGutter: 15, // 最小间距
                resizeDebounce: 200, // 重绘延迟
            },
            preFix: process.env.VUE_APP_BASE_API,
            activitiesData: [],
            activeType: ''
        };
    },
    created() {
        this.getList();
        this.findActiveType()
    },
    methods: {
        async findActiveType() {
            const res = await listData({dictType: 'activity_theme'})
            let index = res.rows.findIndex(item => item.dictLabel === '集体婚礼')
            this.activeType = res.rows[index].dictValue
            this.getActivity();
        },
        getActivity() {
            listActivity({activityType: this.activeType}).then((response) => {
                this.activitiesData = response.rows;
            });
        },
        // 搜索框事件 + 重置事件
        handleSearchChild(data) {
            let querySearch = JSON.parse(JSON.stringify(data[0]));
            switch (data[1]) {
                case "search": // 搜索框
                    this.queryParams = querySearch;
                    this.handleQuery();
                    break;
                case "reset": // 重置按钮
                    this.queryParams = {};
                    this.queryParams.pageNum = 1;
                    this.queryParams.pageSize = 10;
                    this.getList();
                    break;
            }
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {};
            this.resetForm("form");
        },
        /** 查询列表 */
        getList() {
            this.loading = true;
            listAlbum(this.queryParams).then((response) => {
                response.rows.forEach(item=>{
                    if(item.album){
                        let arr = item.album.split(',')
                        let preArr = []
                        arr.forEach(it=>{
                            preArr.push(this.preFix + it)
                        })
                        item.imgList = preArr
                    }
                })
                this.tableData = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.id);
            this.single = selection.length !== 1;
            this.multiple = !selection.length;
        },
        /** 按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams = {};
            this.queryParams.pageNum = 1;
            this.queryParams.pageSize = 10;
            this.getList();
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const id = row.id || this.ids;
            getAlbum(id).then((response) => {
                this.form = response.data;
                this.open = true;
                this.title = "修改";
            });
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate((valid) => {
                if (valid) {
                if (this.form.id != null) {
                    updateAlbum(this.form).then((response) => {
                    this.$message.success("修改成功");
                    this.open = false;
                    this.getList();
                    });
                } else {
                    addAlbum(this.form).then((response) => {
                    this.$message.success("新增成功");
                    this.open = false;
                    this.getList();
                    });
                }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id || this.ids;
            this.$confirm(
                '是否确认删除ID为"' + ids + '"的数据项?',
                "警告",
                {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
                }
            )
            .then(function () {
                return delAlbum(ids);
            })
            .then(() => {
                this.getList();
                this.$message.success("删除成功");
            });
        },
        handleView(row){
            let imgUrlList = row.album ? row.album.split(',') : []
            let imgList = []
            imgUrlList.forEach((it, idx)=>{
                imgList.push({
                    title: idx+1 + '' + row.activityTitle,
                    description: row.venue ,
                    thumbnail: this.preFix + it
                })
            })
            console.log(imgUrlList,'row')

            this.albumList = imgList
            this.drawrOpen = true
        },
        // 点击图片查看大图
        handleImageClick(imageUrl) {
            this.$alert(`<img src="${imageUrl}" style="width: 100%;">`, "查看大图", {
                dangerouslyUseHTMLString: true,
                showConfirmButton: false,
                showClose: true,
            });
        },
    },
};
</script>

<style scoped>
.story-image{
    width: 60px;
}
.album-list {
    padding: 0 20px;
  max-height: 800px; /* 设置最大高度 */
  overflow-y: auto; /* 超出部分显示滚动条 */
}

.album-card {
  margin-bottom: 20px;
}

.album-thumbnail {
  width: 100%;
  height: auto;
  cursor: pointer;
}

.album-info {
  padding: 10px;
}

.album-title {
    width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  font-weight: bold;
  font-size: 16px;
}

.album-description {
    width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  font-size: 14px;
  color: #666;
}
</style>